import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { CapsuleTabs } from "antd-mobile";
import { createAction } from "@common/utils";
import { PUSH_PAGE_STACK, POP_PAGE_STACK } from "@store/global-state/action-types";

const ScanOps = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);

  const handleChange = (key) => {
    let id = searchParams.get("id");
    let path = id ? `/app/prod-inbound/scan-ops/${key}?id=${id}` : `/app/prod-inbound/scan-ops/${key}`;
    dispatch(createAction(POP_PAGE_STACK));
    dispatch(createAction(PUSH_PAGE_STACK, path));
    navigate(path);
  };

  return (
    <div style={{ marginTop: "45px" }}>
      <CapsuleTabs defaultActiveKey="item" onChange={handleChange} style={{backgroundColor: 'white'}}>
        <CapsuleTabs.Tab title="物料码" key="item" />
        <CapsuleTabs.Tab title="托码" key="pallet" />
      </CapsuleTabs>
      <Outlet />
    </div>
  );
};

export default ScanOps;
